<template>
<div class="login-container">
<div class="login-box">
<h2>商家登录</h2>
<el-input v-model="username" placeholder="用户名" prefix-icon="el-icon-user"/>
<el-input v-model="password" type="password" placeholder="密码" prefix-icon="el-icon-lock" style="margin-top:15px;"/>
<el-button type="primary" @click="login" style="margin-top:25px; width:100%;">登录</el-button>
<p v-if="error" class="error">{{ error }}</p >
</div>
</div>
</template>

<script>
export default {
data() {
return { username: '', password: '', error: '' }
},
methods: {
login() {
if (this.username === 'admin' && this.password === '123456') {
this.$store.commit('setLogin', true)
this.$router.push('/dashboard/products')
} else {
this.error = '用户名或密码错误'
}
}
}
}
</script>

<style scoped>
@import '@/assets/theme.css';
.login-container {
display:flex;align-items:center;justify-content:center;
height:100vh;background:var(--color-bg);
}
.login-box {
width:320px;padding:40px;background:#fff0f5;
border-radius:8px;box-shadow:0 2px 12px var(--color-card-shadow);
text-align:center;
}
.error { color:#ff4d6d; margin-top:10px; }
</style>